<!--
@description    数据切换-弹窗
@author         秦俊强
@email          458112865@qq.com
@create         2020-03-06 20:55
-->

<template>
  <a-modal v-model="show" :width="450" @ok="checkedType" :confirmLoading="isSubmit"
           :title="'数据切换（当前数据类型：' + typeInfo.dataTypeName + '）'"
           :maskClosable="false" :cancelButtonProps="{ props: { disabled: isSubmit } }">
    <a-row :gutter="10">
      <a-col :md="7">
        <div class="titleSize">数据类型切换：</div>
      </a-col>

      <a-col :md="17">
        <a-select :value="dataOptions.arr[dataOptions.index].dataType"
                  @change="changeDateType" :disabled="isSubmit" style="width: 200px;" >
          <a-select-option v-for="date in dataOptions.arr"
                           :key="date.dataType">{{ date.dataTypeName }}</a-select-option>
        </a-select>
      </a-col>
    </a-row>
  </a-modal>
</template>



<script>
  export default {
    name: 'SwitchDataType',

    props: {
      dataOptions: {}
    },

    data() {
      return {
        show: false,
        isSubmit: false,
        typeInfo: {}
      }
    },

    created() {
      this.$watch('show', (val) => {
        if (!val) { return; }
        this.typeInfo = this.dataOptions.arr.find((item) => { return item.selected; });
        this.changeDateType();
      });
    },

    methods: {

      /* 监听数据类型的改变 */
      changeDateType(code) {
        let arr = this.dataOptions.arr;
        this.dataOptions.index = arr.findIndex((item) => {
          if (code) { return item.dataType === code; }
          return item.selected;
        });
      },

      /* 确定切换 */
      checkedType() {
        let t = this;
        let oldDataType = t.typeInfo.dataType;
        let newDataType = t.dataOptions.arr[t.dataOptions.index].dataType;

        if (oldDataType === newDataType) {
          t.show = false;
          return;
        }

        t.isSubmit = true;
        t.$parent.setDataTypeCtrl(newDataType, () => {
          t.show = false;
          t.isSubmit = false;
        });
      }
    }
  }
</script>




<style lang="scss" scoped>
  .titleSize {
    line-height: 32px;
  }
</style>

